<template>
  <div>
    <div class="left">
      <div class="left_img">
        <img src="../assets/paonan.png" alt />
      </div>

      <div class="left_top">王跑男</div>
      <div class="left_bottom">前往发货地点</div>
    </div>

    <div class="conter">
      <div class="left_img">
        <img src="../assets/paonan.png" alt />
      </div>

      <div class="left_top">张跑男</div>
      <div class="left_bottom">正在取货</div>
    </div>

    <div class="right">
      <div class="left_top">更多进行中订单</div>
      <div class="right_img">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jiantou1" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Xianshi"
};
</script>

<style scoped lang="less">
.left {
  position: absolute;
  width: 30vw;
  height: 9vw;
  // border: 1px solid red;
  // margin-top: -164vw;
  margin-left: 2.5vw;
  border-radius: 1vw;
  background: #ffffff;
  top: 14vw;
  .left_img {
    display: inline-block;
    img {
      display: block;
      width: 6vw;
      margin-top: 0.3vw;
      border-radius: 3vw;
      margin-left: 1vw;
    }
  }

  .left_top {
    position: absolute;
    width: 10vw;
    height: 1vw;
    font-size: 3vw;
    // line-height: 3vh;
    margin-top: -8.2vw;
    margin-left: 8vw;
    color: #1a1a1a;
  }
  .left_bottom {
    position: absolute;
    width: 20vw;
    height: 1vw;
    font-size: 3vw;
    // line-height: 3vh;
    margin-top: -4.5vw;
    margin-left: 8vw;
    color: #9999;
  }
}

.conter {
  position: absolute;
  width: 30vw;
  height: 9vw;
  // border: 1px solid red;
  // margin-top: -164vw;
  margin-left: 35vw;
  border-radius: 1vw;
  background: #ffffff;
  top: 14vw;
  .left_img {
    display: inline-block;
    img {
      display: block;
      width: 6vw;
      margin-top: 0.3vw;
      border-radius: 3vw;
      margin-left: 1vw;
    }
  }

  .left_top {
    position: absolute;
    width: 10vw;
    height: 1vw;
    font-size: 3vw;
    // line-height: 3vh;
    margin-top: -8.2vw;
    margin-left: 8vw;
    color: #1a1a1a;
  }
  .left_bottom {
    position: absolute;
    width: 20vw;
    height: 1vw;
    font-size: 3vw;
    // line-height: 3vh;
    margin-top: -4.5vw;
    margin-left: 8vw;
    color: #9999;
  }
}

.right {
  position: absolute;
  width: 30vw;
  height: 9vw;
  // border: 1px solid red;
  // margin-top: -164vw;
  margin-left: 68vw;
  border-radius: 1vw;
  background: #ffffff;
  top: 14vw;

  .left_top {
    position: absolute;
    width: 24vw;
    height: 1vw;
    font-size: 3vw;
    // line-height: 3vh;
    margin-top: 2vw;
    margin-left: 0vw;
    color: #1a1a1a;
    text-align: center;
  }
  .right_img {
    position: relative;
    width: 5vw;
    height: 5vw;
    margin-top: 1.5vw;
    margin-left: 24vw;
    // border: 1px solid red;
    .icon {
      position: absolute;
      display: block;
      width: 2.5vw;
      height: 3vw;
      text-align: center;
      margin-top: 1vw;
      // margin-left: 25vw;
    }
  }
}
</style>